<html>
<head>
<title>day03作业_学习热点App模态转场完善.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #3d8c2b; font-weight: bold;}
.s1 { color: #a9b7c6;}
.s2 { color: #faa23d;}
.s3 { color: #e2da90;}
.s4 { color: #db7e9b;}
.s5 { color: #bbb529;}
.s6 { color: #aa7dfc;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day03作业_学习热点App模态转场完善.ets</font>
</center></td></tr></table>
<pre><span class="s0">//grdi和热门推荐图文接口</span>
<span class="s1">interface List1 </span><span class="s2">{</span>
  <span class="s1">img</span><span class="s3">: </span><span class="s1">Resource</span><span class="s3">,</span>
  <span class="s1">text</span><span class="s3">: </span><span class="s1">string</span>
  <span class="s1">createTime</span><span class="s3">?: </span><span class="s1">string</span>
<span class="s2">}</span>

<span class="s0">//全屏模态接口</span>
<span class="s1">interface TopicItem </span><span class="s2">{</span>
  <span class="s1">title</span><span class="s3">: </span><span class="s1">string</span><span class="s3">,</span>
  <span class="s1">children</span><span class="s3">?: </span><span class="s1">SubTopicItem</span><span class="s4">[]</span>
<span class="s2">}</span>

<span class="s1">interface SubTopicItem </span><span class="s2">{</span>
  <span class="s1">subTitle</span><span class="s3">: </span><span class="s1">string</span><span class="s3">,</span>
  <span class="s1">total</span><span class="s3">: </span><span class="s1">string</span>
<span class="s2">}</span>

<span class="s5">@</span><span class="s1">Entry</span>
<span class="s5">@</span><span class="s1">Component</span>
<span class="s1">struct Index </span><span class="s2">{</span>
  <span class="s5">@</span><span class="s1">State list1</span><span class="s3">: </span><span class="s1">List1</span><span class="s4">[] </span><span class="s3">= </span><span class="s4">[</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_1'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'内容精选' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_2'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'学堂' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_3'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'鸿蒙开发者社区' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_4'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'博客' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_5'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'企业培训' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_6'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'Next训练营' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_01_7'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'精培' </span><span class="s2">}</span><span class="s3">,</span>
  <span class="s4">]</span>
  <span class="s5">@</span><span class="s1">State list2</span><span class="s3">: </span><span class="s1">List1</span><span class="s4">[] </span><span class="s3">= </span><span class="s4">[</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.banner_01_1'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'谷歌杀入开源大模型凭什么问鼎王座？' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.banner_01_2'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'微软牵手OpenAl劲敌！Mistral顶级大模型不...' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.banner_01_3'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'生成式AI会扼杀DevSecOps吗' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.banner_01_4'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'微软继续Linux化！sudo原生命令强势登录...' </span><span class="s2">}</span><span class="s3">,</span>
  <span class="s4">]</span>
  <span class="s0">//热门推荐内容</span>
  <span class="s5">@</span><span class="s1">State recommendList</span><span class="s3">: </span><span class="s1">List1</span><span class="s4">[] </span><span class="s3">= </span><span class="s4">[</span>
    <span class="s2">{</span>
      <span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.list_02_1'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s1">text</span><span class="s3">: </span><span class="s6">'字节一面：TCP和UDP可以使用同一个端口号吗？'</span><span class="s3">,</span>
      <span class="s1">createTime</span><span class="s3">: </span><span class="s6">'2024-03-05 10:07:22'</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.list_02_2'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s1">text</span><span class="s3">: </span><span class="s6">'NoSQL：在高并发场景下，数据库和NoSQL如何做到互补？'</span><span class="s3">,</span>
      <span class="s1">createTime</span><span class="s3">: </span><span class="s6">'2024-03-05 10:03:17'</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.list_02_3'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s1">text</span><span class="s3">: </span><span class="s6">'处理大规模并发请求时如何设计和优化Python后端服务的架构和性能'</span><span class="s3">,</span>
      <span class="s1">createTime</span><span class="s3">: </span><span class="s6">'2024-03-05 10:03:09'</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.list_02_4'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s1">text</span><span class="s3">: </span><span class="s6">'C++右值引用：解锁高效内存管理与性能优化的奥秘'</span><span class="s3">,</span>
      <span class="s1">createTime</span><span class="s3">: </span><span class="s6">'2024-03-05 09:55:00'</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">img</span><span class="s3">: </span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.list_02_5'</span><span class="s4">)</span><span class="s3">, </span><span class="s1">text</span><span class="s3">: </span><span class="s6">'现代分布式系统架构的权衡分析'</span><span class="s3">, </span><span class="s1">createTime</span><span class="s3">: </span><span class="s6">'2024-03-05 09:52:57' </span><span class="s2">}</span><span class="s3">,</span>
  <span class="s4">]</span>

  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">TabbarPrams</span><span class="s4">(</span><span class="s1">text</span><span class="s3">: </span><span class="s1">string</span><span class="s3">, </span><span class="s1">index</span><span class="s3">: </span><span class="s1">number</span><span class="s4">) </span><span class="s2">{</span>
    <span class="s1">if </span><span class="s4">(</span><span class="s1">index </span><span class="s3">== </span><span class="s7">2</span><span class="s4">) </span><span class="s2">{</span>
      <span class="s1">Badge</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">count</span><span class="s3">: </span><span class="s7">9</span><span class="s3">, </span><span class="s1">style</span><span class="s3">: </span><span class="s2">{}</span><span class="s3">, </span><span class="s1">position</span><span class="s3">: </span><span class="s2">{ </span><span class="s1">y</span><span class="s3">: -</span><span class="s7">5</span><span class="s3">, </span><span class="s1">x</span><span class="s3">: </span><span class="s7">25 </span><span class="s2">} }</span><span class="s4">) </span><span class="s2">{</span>
        <span class="s1">Text</span><span class="s4">(</span><span class="s1">text</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">18</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">selectedIndex </span><span class="s3">== </span><span class="s1">index </span><span class="s3">? </span><span class="s6">'#000' </span><span class="s3">: </span><span class="s6">'#999'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
      <span class="s2">}</span>
    <span class="s2">} </span><span class="s1">else </span><span class="s2">{</span>
      <span class="s1">Text</span><span class="s4">(</span><span class="s1">text</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">selectedIndex </span><span class="s3">== </span><span class="s1">index </span><span class="s3">? </span><span class="s6">'#000' </span><span class="s3">: </span><span class="s6">'#999'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
      <span class="s0">// .backgroundImage($r('app.media.bg_02_1'))</span>
      <span class="s0">// .width('100%')</span>
      <span class="s0">// .height('100%')</span>
    <span class="s2">}</span>

  <span class="s2">}</span>

  <span class="s5">@</span><span class="s1">State selectedIndex</span><span class="s3">: </span><span class="s1">number </span><span class="s3">= </span><span class="s7">0</span>
  <span class="s0">//全模模态数据内容</span>
  <span class="s1">cityContentList</span><span class="s3">: </span><span class="s1">TopicItem</span><span class="s4">[] </span><span class="s3">= </span><span class="s4">[</span>
    <span class="s2">{</span>
      <span class="s1">title</span><span class="s3">: </span><span class="s6">'开发'</span><span class="s3">,</span>
      <span class="s1">children</span><span class="s3">: </span><span class="s4">[</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'前端'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.3w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'后端'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.5w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'开发工具'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'7181' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'游戏开发'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'1001' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'项目管理'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'608' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'架构'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2005' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'VR/AR'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'100' </span><span class="s2">}</span><span class="s3">,</span>
      <span class="s4">]</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">title</span><span class="s3">: </span><span class="s6">'人工智能'</span><span class="s3">,</span>
      <span class="s1">children</span><span class="s3">: </span><span class="s4">[</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'机器学习'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.3w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'深度学习'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.5w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'算法'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'7181' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'语音识别'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'1001' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'人脸识别'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'608' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'机器视觉'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2005' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'无人驾驶'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'100' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'机器人'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'100' </span><span class="s2">}</span><span class="s3">,</span>
      <span class="s4">]</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">title</span><span class="s3">: </span><span class="s6">'云计算'</span><span class="s3">,</span>
      <span class="s1">children</span><span class="s3">: </span><span class="s4">[</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'云原生'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.3w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'混合云'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.5w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'分布式'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'7181' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'Laas'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'1001' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'Paas'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'608' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'Saas'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2005' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'Kafka'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'100' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'虚拟化'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'100' </span><span class="s2">}</span><span class="s3">,</span>
      <span class="s4">]</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">title</span><span class="s3">: </span><span class="s6">'开源' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">title</span><span class="s3">: </span><span class="s6">'网络'</span><span class="s3">,</span>
      <span class="s1">children</span><span class="s3">: </span><span class="s4">[</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'网络设备'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.3w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'通信技术'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.5w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'网络优化'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'7181' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'网络管理'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'1001' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'路由交换'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'608' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'布线接入'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2005' </span><span class="s2">}</span><span class="s3">,</span>
      <span class="s4">]</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span>
      <span class="s1">title</span><span class="s3">: </span><span class="s6">'大数据'</span><span class="s3">,</span>
      <span class="s1">children</span><span class="s3">: </span><span class="s4">[</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'数据分析'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.3w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'数据可视化'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2.5w' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'商业智能'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'7181' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'Spark'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'1001' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'数据湖'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'608' </span><span class="s2">}</span><span class="s3">,</span>
        <span class="s2">{ </span><span class="s1">subTitle</span><span class="s3">: </span><span class="s6">'数据仓库'</span><span class="s3">, </span><span class="s1">total</span><span class="s3">: </span><span class="s6">'2005' </span><span class="s2">}</span><span class="s3">,</span>
      <span class="s4">]</span>
    <span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">title</span><span class="s3">: </span><span class="s6">'区块链' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">title</span><span class="s3">: </span><span class="s6">'服务器' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">title</span><span class="s3">: </span><span class="s6">'元宇宙' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s1">title</span><span class="s3">: </span><span class="s6">'原创' </span><span class="s2">}</span><span class="s3">,</span>
  <span class="s4">]</span>
  <span class="s0">// AlphabetIndexer组件数据</span>
  <span class="s0">//右侧导航索引栏</span>
  <span class="s1">alphabets</span><span class="s3">: </span><span class="s1">string</span><span class="s4">[] </span><span class="s3">= </span><span class="s4">[</span><span class="s6">'开'</span><span class="s3">, </span><span class="s6">'智'</span><span class="s3">, </span><span class="s6">'云'</span><span class="s3">, </span><span class="s6">'源'</span><span class="s3">, </span><span class="s6">'网'</span><span class="s3">, </span><span class="s6">'大'</span><span class="s3">, </span><span class="s6">'区'</span><span class="s3">, </span><span class="s6">'服'</span><span class="s3">, </span><span class="s6">'元'</span><span class="s3">, </span><span class="s6">'原'</span><span class="s4">]</span>
  <span class="s0">//AlphabetIndexer字导航栏索引</span>
  <span class="s5">@</span><span class="s1">State alphabetsIndex</span><span class="s3">: </span><span class="s1">number </span><span class="s3">= </span><span class="s7">0</span>
  <span class="s0">//创建内容控制器</span>
  <span class="s1">myscroll </span><span class="s3">= </span><span class="s1">new Scroller</span><span class="s4">()</span>
  <span class="s0">//定义全模态是否显示状态变量</span>
  <span class="s5">@</span><span class="s1">State isShow</span><span class="s3">: </span><span class="s1">boolean </span><span class="s3">= </span><span class="s1">false</span>
  <span class="s0">//1.创建List滚动控制器</span>
  <span class="s1">myList </span><span class="s3">= </span><span class="s1">new Scroller</span><span class="s4">()</span>

  <span class="s1">build</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s1">Tabs</span><span class="s4">() </span><span class="s2">{</span>
      <span class="s1">TabContent</span><span class="s4">() </span><span class="s2">{</span>
        <span class="s1">Column</span><span class="s4">() </span><span class="s2">{</span>
          <span class="s1">Row</span><span class="s4">() </span><span class="s2">{</span>
            <span class="s1">Image</span><span class="s4">(</span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.hot_01'</span><span class="s4">))</span>
              <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">60</span><span class="s4">)</span>
            <span class="s1">Row</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s3">: </span><span class="s7">15 </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
              <span class="s1">Image</span><span class="s4">(</span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.user_01'</span><span class="s4">))</span>
                <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
              <span class="s1">Image</span><span class="s4">(</span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.more_01'</span><span class="s4">))</span>
                <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
                <span class="s3">.</span><span class="s1">bindContentCover</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">isShow</span><span class="s3">, </span><span class="s1">this</span><span class="s3">.</span><span class="s1">ContentCoverBuilder</span><span class="s4">())</span>
                <span class="s3">.</span><span class="s1">onClick</span><span class="s4">(() </span><span class="s3">=&gt; </span><span class="s2">{</span>
                  <span class="s1">this</span><span class="s3">.</span><span class="s1">isShow </span><span class="s3">= </span><span class="s1">true</span>
                <span class="s2">}</span><span class="s4">)</span>
            <span class="s2">}</span>
          <span class="s2">}</span>
          <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">justifyContent</span><span class="s4">(</span><span class="s1">FlexAlign</span><span class="s3">.</span><span class="s1">SpaceBetween</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s3">: </span><span class="s7">28</span><span class="s3">, </span><span class="s1">right</span><span class="s3">: </span><span class="s7">16 </span><span class="s2">}</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">56</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">onClick</span><span class="s4">(() </span><span class="s3">=&gt; </span><span class="s2">{</span>
            <span class="s1">this</span><span class="s3">.</span><span class="s1">myscroll</span><span class="s3">.</span><span class="s1">scrollEdge</span><span class="s4">(</span><span class="s1">Edge</span><span class="s3">.</span><span class="s1">Top</span><span class="s4">)</span>
          <span class="s2">}</span><span class="s4">)</span>

          <span class="s1">Scroll</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">myscroll</span><span class="s4">) </span><span class="s2">{</span>
            <span class="s1">Column</span><span class="s4">() </span><span class="s2">{</span>
              <span class="s1">Column</span><span class="s4">() </span><span class="s2">{</span>
                <span class="s1">Swiper</span><span class="s4">() </span><span class="s2">{</span>
                  <span class="s1">ForEach</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">list2</span><span class="s3">, </span><span class="s4">(</span><span class="s1">item</span><span class="s3">: </span><span class="s1">List1</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
                    <span class="s1">Column</span><span class="s4">() </span><span class="s2">{</span>
                      <span class="s1">Image</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">img</span><span class="s4">)</span>
                      <span class="s1">Text</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">text</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s1">Color</span><span class="s3">.</span><span class="s1">White</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">position</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s1">bottom</span><span class="s3">: </span><span class="s7">30 </span><span class="s2">}</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
                    <span class="s2">}</span>
                  <span class="s2">}</span><span class="s4">)</span>
                  <span class="s0">// ForEach(this.text, (item: string) =&gt; {</span>
                  <span class="s0">//   Text(item)</span>
                  <span class="s0">//     .fontColor(Color.White)</span>
                  <span class="s0">//     .position({ left: 10, bottom: 30 })</span>
                  <span class="s0">//     .fontWeight(700)</span>
                  <span class="s0">// })</span>
                <span class="s2">}</span>
                <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
                <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">300</span><span class="s4">)</span>
                <span class="s3">.</span><span class="s1">indicator</span><span class="s4">(</span>
                  <span class="s1">Indicator</span><span class="s3">.</span><span class="s1">dot</span><span class="s4">()</span>
                    <span class="s3">.</span><span class="s1">itemWidth</span><span class="s4">(</span><span class="s7">30</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">itemHeight</span><span class="s4">(</span><span class="s7">5</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">color</span><span class="s4">(</span><span class="s6">'#ccc'</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">selectedItemWidth</span><span class="s4">(</span><span class="s7">30</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">selectedItemHeight</span><span class="s4">(</span><span class="s7">5</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">selectedColor</span><span class="s4">(</span><span class="s1">Color</span><span class="s3">.</span><span class="s1">White</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">left</span><span class="s4">(</span><span class="s7">0</span><span class="s4">)</span>
                <span class="s4">)</span>
              <span class="s2">}</span>

              <span class="s1">Grid</span><span class="s4">() </span><span class="s2">{</span>
                <span class="s1">ForEach</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">list1</span><span class="s3">, </span><span class="s4">(</span><span class="s1">item</span><span class="s3">: </span><span class="s1">List1</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
                  <span class="s1">GridItem</span><span class="s4">() </span><span class="s2">{</span>
                    <span class="s1">Column</span><span class="s4">() </span><span class="s2">{</span>
                      <span class="s1">Image</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">img</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">40</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">aspectRatio</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
                      <span class="s1">Text</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">text</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s6">'#666666'</span><span class="s4">)</span>
                    <span class="s2">}</span>
                  <span class="s2">}</span>
                  <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">65</span><span class="s4">)</span>
                <span class="s2">}</span><span class="s4">)</span>
              <span class="s2">}</span>
              <span class="s3">.</span><span class="s1">scrollBar</span><span class="s4">(</span><span class="s1">BarState</span><span class="s3">.</span><span class="s1">Off</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">rowsTemplate</span><span class="s4">(</span><span class="s6">'1fr'</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">100</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">columnsGap</span><span class="s4">(</span><span class="s7">24</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s3">: </span><span class="s7">12</span><span class="s3">, </span><span class="s1">right</span><span class="s3">: </span><span class="s7">12 </span><span class="s2">}</span><span class="s4">)</span>

              <span class="s0">//热门推荐滚动</span>
              <span class="s1">Column</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s3">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
                <span class="s1">Text</span><span class="s4">(</span><span class="s6">'热门推荐'</span><span class="s4">)</span>
                  <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
                  <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
                <span class="s1">ForEach</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">recommendList</span><span class="s3">, </span><span class="s4">(</span><span class="s1">item</span><span class="s3">: </span><span class="s1">List1</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
                  <span class="s1">Row</span><span class="s4">() </span><span class="s2">{</span>
                    <span class="s1">Image</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">img</span><span class="s4">)</span>
                      <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">100</span><span class="s4">)</span>
                      <span class="s3">.</span><span class="s1">borderRadius</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>
                    <span class="s1">Column</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s3">: </span><span class="s7">40 </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
                      <span class="s1">Text</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">text</span><span class="s4">)</span>
                        <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
                      <span class="s1">Text</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">createTime</span><span class="s4">)</span>
                    <span class="s2">}</span>
                    <span class="s3">.</span><span class="s1">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
                    <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
                  <span class="s2">}</span>
                  <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
                  <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">130</span><span class="s4">)</span>
                  <span class="s3">.</span><span class="s1">border</span><span class="s4">(</span><span class="s2">{</span>
                    <span class="s1">width</span><span class="s3">: </span><span class="s2">{ </span><span class="s1">bottom</span><span class="s3">: </span><span class="s7">1 </span><span class="s2">}</span><span class="s3">,</span>
                    <span class="s1">color</span><span class="s3">: </span><span class="s6">'#ffdedcdc'</span>
                  <span class="s2">}</span><span class="s4">)</span>
                <span class="s2">}</span><span class="s4">)</span>

              <span class="s2">}</span>
              <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">alignItems</span><span class="s4">(</span><span class="s1">HorizontalAlign</span><span class="s3">.</span><span class="s1">Start</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s1">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s1">right</span><span class="s3">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s4">)</span>
            <span class="s2">}</span>
          <span class="s2">}</span>
          <span class="s3">.</span><span class="s1">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
      <span class="s2">}</span><span class="s3">.</span><span class="s1">tabBar</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">TabbarPrams</span><span class="s4">(</span><span class="s6">'首页'</span><span class="s3">, </span><span class="s7">0</span><span class="s4">))</span>

      <span class="s1">TabContent</span><span class="s4">() </span><span class="s2">{</span>


      <span class="s2">}</span><span class="s3">.</span><span class="s1">tabBar</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">TabbarPrams</span><span class="s4">(</span><span class="s6">'视频'</span><span class="s3">, </span><span class="s7">1</span><span class="s4">))</span>

      <span class="s1">TabContent</span><span class="s4">() </span><span class="s2">{</span>
      <span class="s2">}</span><span class="s3">.</span><span class="s1">tabBar</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">TabbarPrams</span><span class="s4">(</span><span class="s6">'消息'</span><span class="s3">, </span><span class="s7">2</span><span class="s4">))</span>

      <span class="s1">TabContent</span><span class="s4">() </span><span class="s2">{</span>

      <span class="s2">}</span><span class="s3">.</span><span class="s1">tabBar</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">TabbarPrams</span><span class="s4">(</span><span class="s6">'我的'</span><span class="s3">, </span><span class="s7">3</span><span class="s4">))</span>
    <span class="s2">}</span>


    <span class="s3">.</span><span class="s1">onChange</span><span class="s4">((</span><span class="s1">index</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
      <span class="s1">this</span><span class="s3">.</span><span class="s1">selectedIndex </span><span class="s3">= </span><span class="s1">index</span>
    <span class="s2">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s1">barPosition</span><span class="s4">(</span><span class="s1">BarPosition</span><span class="s3">.</span><span class="s1">End</span><span class="s4">)</span>
  <span class="s2">}</span>

  <span class="s0">//全屏模态的内容</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">ContentCoverBuilder</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s1">Stack</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">alignContent</span><span class="s3">: </span><span class="s1">Alignment</span><span class="s3">.</span><span class="s1">End </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
      <span class="s1">Column</span><span class="s4">() </span><span class="s2">{</span>
        <span class="s0">//顶部</span>
        <span class="s1">this</span><span class="s3">.</span><span class="s1">TopBuilder</span><span class="s4">()</span>
        <span class="s0">//List列表</span>
        <span class="s1">this</span><span class="s3">.</span><span class="s1">ListBuilder</span><span class="s4">()</span>
      <span class="s2">}</span>

      <span class="s0">//字母导航栏</span>
      <span class="s1">this</span><span class="s3">.</span><span class="s1">AlphabetBuilder</span><span class="s4">()</span>
    <span class="s2">}</span>
    <span class="s3">.</span><span class="s1">backgroundColor</span><span class="s4">(</span><span class="s1">Color</span><span class="s3">.</span><span class="s1">White</span><span class="s4">)</span>
  <span class="s2">}</span>

  <span class="s0">//顶部</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">TopBuilder</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s1">Stack</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">alignContent</span><span class="s3">: </span><span class="s1">Alignment</span><span class="s3">.</span><span class="s1">TopEnd </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
      <span class="s1">Text</span><span class="s4">(</span><span class="s6">'全部话题'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">80</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">textAlign</span><span class="s4">(</span><span class="s1">TextAlign</span><span class="s3">.</span><span class="s1">Center</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">30</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
      <span class="s1">Button</span><span class="s4">(</span><span class="s6">'X'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">padding</span><span class="s4">(</span><span class="s7">0</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">margin</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">top</span><span class="s3">: </span><span class="s7">25</span><span class="s3">, </span><span class="s1">right</span><span class="s3">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">30</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">30</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">borderRadius</span><span class="s4">(</span><span class="s7">15</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">500</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s6">'rgba(0,0,0,0.5)'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">backgroundColor</span><span class="s4">(</span><span class="s6">'rgba(0,0,0,0)'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">onClick</span><span class="s4">(() </span><span class="s3">=&gt; </span><span class="s2">{</span>
          <span class="s1">this</span><span class="s3">.</span><span class="s1">isShow </span><span class="s3">= </span><span class="s1">false</span>
        <span class="s2">}</span><span class="s4">)</span>
    <span class="s2">}</span>

    <span class="s0">// .alignContent(Alignment.TopEnd)</span>
  <span class="s2">}</span>

  <span class="s0">//List列表</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">ListBuilder</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s0">//2、绑定控制器给List</span>
    <span class="s1">List</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">scroller</span><span class="s3">: </span><span class="s1">this</span><span class="s3">.</span><span class="s1">myList </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
      <span class="s1">this</span><span class="s3">.</span><span class="s1">LetterListItemBuilder</span><span class="s4">()</span>
    <span class="s2">}</span>
    <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s1">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s1">sticky</span><span class="s4">(</span><span class="s1">StickyStyle</span><span class="s3">.</span><span class="s1">Header</span><span class="s4">)</span>
    <span class="s0">//3、绑定监听事件绑定导航栏索引</span>
    <span class="s3">.</span><span class="s1">onScrollIndex</span><span class="s4">((</span><span class="s1">index</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
      <span class="s1">this</span><span class="s3">.</span><span class="s1">alphabetsIndex </span><span class="s3">= </span><span class="s1">index</span>
    <span class="s2">}</span><span class="s4">)</span>
  <span class="s2">}</span>

  <span class="s0">//Gourp分组区域</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">LetterListItemBuilder</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s1">ForEach</span><span class="s4">(</span><span class="s1">this</span><span class="s3">.</span><span class="s1">cityContentList</span><span class="s3">, </span><span class="s4">(</span><span class="s1">item</span><span class="s3">: </span><span class="s1">TopicItem</span><span class="s3">, </span><span class="s1">index</span><span class="s3">: </span><span class="s1">number</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
      <span class="s1">ListItemGroup</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">header</span><span class="s3">: </span><span class="s1">this</span><span class="s3">.</span><span class="s1">GourpBuluder</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">title</span><span class="s4">)</span><span class="s3">, </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
        <span class="s1">ForEach</span><span class="s4">(</span><span class="s1">item</span><span class="s3">.</span><span class="s1">children</span><span class="s3">, </span><span class="s4">(</span><span class="s1">item1</span><span class="s3">: </span><span class="s1">SubTopicItem</span><span class="s3">, </span><span class="s1">index</span><span class="s3">: </span><span class="s1">number</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
          <span class="s1">ListItem</span><span class="s4">() </span><span class="s2">{</span>
            <span class="s1">this</span><span class="s3">.</span><span class="s1">ListItemBulider</span><span class="s4">(</span><span class="s1">item1</span><span class="s3">.</span><span class="s1">subTitle</span><span class="s3">, </span><span class="s1">item1</span><span class="s3">.</span><span class="s1">total</span><span class="s4">)</span>
          <span class="s2">}</span>
        <span class="s2">}</span><span class="s4">)</span>
      <span class="s2">}</span>
    <span class="s2">}</span><span class="s4">)</span>

  <span class="s2">}</span>

  <span class="s0">//ListItemGourp的分组</span>
  <span class="s0">//文字分类标识</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">GourpBuluder</span><span class="s4">(</span><span class="s1">text</span><span class="s3">: </span><span class="s1">string</span><span class="s4">) </span><span class="s2">{</span>
    <span class="s1">Row</span><span class="s4">() </span><span class="s2">{</span>
      <span class="s1">Image</span><span class="s4">(</span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_03_title'</span><span class="s4">))</span>
        <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">18</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">18</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">margin</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">right</span><span class="s3">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s4">)</span>
      <span class="s1">Text</span><span class="s4">(</span><span class="s1">text</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s6">'#333'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
    <span class="s2">}</span>
    <span class="s3">.</span><span class="s1">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s3">: </span><span class="s7">20 </span><span class="s2">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">50</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s1">backgroundColor</span><span class="s4">(</span><span class="s6">'#d5d5d5'</span><span class="s4">)</span>
  <span class="s2">}</span>

  <span class="s0">//ListItem列表内容</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">ListItemBulider</span><span class="s4">(</span><span class="s1">text1</span><span class="s3">: </span><span class="s1">string</span><span class="s3">, </span><span class="s1">text2</span><span class="s3">: </span><span class="s1">string</span><span class="s3">,</span><span class="s4">) </span><span class="s2">{</span>
    <span class="s1">ListItem</span><span class="s4">() </span><span class="s2">{</span>
      <span class="s1">Row</span><span class="s4">() </span><span class="s2">{</span>
        <span class="s1">Image</span><span class="s4">(</span><span class="s1">$r</span><span class="s4">(</span><span class="s6">'app.media.ic_03_title'</span><span class="s4">))</span>
          <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
        <span class="s1">Text</span><span class="s4">(</span><span class="s1">text1</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s6">'#333'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s1">margin</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">right</span><span class="s3">: </span><span class="s7">8</span><span class="s3">, </span><span class="s1">left</span><span class="s3">: </span><span class="s7">8 </span><span class="s2">}</span><span class="s4">)</span>
        <span class="s1">Text</span><span class="s4">() </span><span class="s2">{</span>
          <span class="s1">Span</span><span class="s4">(</span><span class="s1">text2</span><span class="s4">)</span>
          <span class="s1">Span</span><span class="s4">(</span><span class="s6">'内容'</span><span class="s4">)</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s1">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s1">fontColor</span><span class="s4">(</span><span class="s6">'#999'</span><span class="s4">)</span>
      <span class="s2">}</span>
      <span class="s3">.</span><span class="s1">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s3">: </span><span class="s7">30</span><span class="s3">, </span><span class="s1">right</span><span class="s3">: </span><span class="s7">30 </span><span class="s2">}</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s1">width</span><span class="s4">(</span><span class="s6">'100%'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s1">height</span><span class="s4">(</span><span class="s7">40</span><span class="s4">)</span>
    <span class="s2">}</span>
  <span class="s2">}</span>

  <span class="s0">//字母索引区</span>
  <span class="s5">@</span><span class="s1">Builder</span>
  <span class="s1">AlphabetBuilder</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s1">AlphabetIndexer</span><span class="s4">(</span><span class="s2">{ </span><span class="s1">arrayValue</span><span class="s3">: </span><span class="s1">this</span><span class="s3">.</span><span class="s1">alphabets</span><span class="s3">, </span><span class="s1">selected</span><span class="s3">: </span><span class="s1">this</span><span class="s3">.</span><span class="s1">alphabetsIndex </span><span class="s2">}</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s1">itemSize</span><span class="s4">(</span><span class="s7">25</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s1">font</span><span class="s4">(</span><span class="s2">{</span>
        <span class="s1">size</span><span class="s3">: </span><span class="s7">15.</span>
      <span class="s2">}</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s1">selectedFont</span><span class="s4">(</span><span class="s2">{</span>
        <span class="s1">size</span><span class="s3">: </span><span class="s7">20</span>
      <span class="s2">}</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s1">usingPopup</span><span class="s4">(</span><span class="s1">true</span><span class="s4">)</span><span class="s0">//绑定选择事件，点击选择导航栏，页面跟随选择索引值自动滑动到相应页面页面</span>
      <span class="s3">.</span><span class="s1">onSelect</span><span class="s4">((</span><span class="s1">index</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
        <span class="s1">this</span><span class="s3">.</span><span class="s1">myList</span><span class="s3">.</span><span class="s1">scrollToIndex</span><span class="s4">(</span><span class="s1">index</span><span class="s4">)</span>
      <span class="s2">}</span><span class="s4">)</span>
  <span class="s2">}</span>
<span class="s2">}</span></pre>
</body>
</html>